<template>
	<div class="sh-ui-home">
		<div class="mb-3">
			<h1>sh-ui</h1>
			<div><p>麻雀虽小、五脏俱全，主打的就是一个便捷！</p></div>
		</div>
		<sh-header type="primary" class="mb-3">
			<div>依赖库：sh-tools</div>
			<div>npm install sh-tools sh-view</div>
			<div>若使用vite开发则需在vite.config添加 optimizeDeps: { include: ['sh-tools'] }</div>
		</sh-header>
		<sh-header type="warning" class="mb-3">
			<div>import { createApp } from 'vue'</div>
			<div>import ShUi from 'sh-view'</div>
			<div>const shRoot = createApp(App)</div>
			<div>shRoot.use(ShUi).mount('#app')</div>
		</sh-header>
		<sh-header type="primary" class="mb-3">
			<div>全局使用vxe及自定义组件库</div>
			<div>默认vxe及自定义部分组件全局安装（vxe自定义渲染器依赖于自定义组件）</div>
			<div>
				扩展组件
				<template v-for="excomp in extraComponents" :key="excomp">
					<sh-tag color="primary">{{ excomp }}</sh-tag>
				</template>
				需要手动引入 import { ShMenu } from 'sh-view/other'
			</div>
		</sh-header>
	</div>
</template>

<script>
export default {
	name: 'ShHome',
	components: {},
	data() {
		return {
			extraComponents: ['sh-cron-modal', 'sh-markdown', 'sh-menu', 'sh-preview', 'sh-system-tip']
		}
	},
	methods: {}
}
</script>

<style scoped lang="scss">
.sh-ui-home {
	h1 {
		width: 100%;
		font-size: 70px;
		animation: letterSpaceW 1s ease-in-out;
		animation-fill-mode: forwards;
		background: linear-gradient(330deg, #1890ff, #8effff);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}
@keyframes letterSpaceW {
	0% {
		letter-spacing: -40px;
	}
	100% {
		letter-spacing: 5px;
	}
}
</style>
